import { defineComponent, h, reactive } from "vue";
import Map from "../components/Map";
import Plane from "../components/Plane";
import Enemy from "../components/Enemy";
import Bullet from "../components/Bullet";
import EnemyBullet from '../components/enemyBullet'
import game from "../Game";
import { hitTestRectangle } from "../utils/hitTestRectangle";

export default defineComponent({
  setup(props, ctx) {
    let { planeInfo } = useCreatePlane();
    let { enemyList, moveEnemy } = useCreateEnemy();
    let {
      selfBullteList,
      addBullte,
      moveBullte,
      removeBullte,
    } = createSelfBullte();

    let  {
      enemyBullteList,
      addEnemyBullte,
      moveEnemyBullte,
      removeEnemyBullte,
    } = createEnemyBullte()

    let tickerHandle = function() {
      // 移动敌人的飞机
      moveEnemy()
      // 自己子弹移动      
      moveBullte()
       // 敌方子弹移动
      moveEnemyBullte()
      // 碰撞检测
      enemyList.forEach((v) => {
        if (hitTestRectangle(v, planeInfo)) {
          ctx.emit("changePage", "endPage");
          game.ticker.remove(tickerHandle);
        }
      });
      // 我方子弹碰撞敌方飞机 
      selfBullteList.forEach((selfBullte, selfIndex)=> {
        enemyList.forEach((enemy, enemyIndex)=> {
          if (hitTestRectangle(selfBullte, enemy) || selfBullte.y < -40) {
            // 子弹销毁  
            removeBullte(selfIndex)
            // 飞机如果 生命值为0， 则销毁 
            enemy.life--
            if (enemy.life <=  0) {
              // enemyList.splice(enemyIndex, 1) // 销毁敌机 
              enemy.y = -160
            }
          }
        })
      })
      // 我方子弹 碰撞敌方子弹 
      selfBullteList.forEach((selfBullte, selfIndex)=> {
        enemyBullteList.forEach((enemyBullteItem, enemyIndex)=>{
           if (hitTestRectangle(selfBullte, enemyBullteItem)) {
              // 子弹己方销毁  
              removeBullte(selfIndex)
              // 销毁敌方子弹 
              removeEnemyBullte(enemyIndex)
           }
        })
      })

      // 敌方子弹 碰撞我方飞机
      enemyBullteList.forEach((enemyBullteItem, enemyIndex)=>{
        if (hitTestRectangle(planeInfo, enemyBullteItem) || enemyBullteItem.y > 1100) {
          removeEnemyBullte(enemyIndex)
        }
      })
      
    };

  

    // 英雄攻击
    let selfAttack = ( {x, y} ) => {
      console.log('飞机攻击了', x, y);
      addBullte({
        x: x.value + 52,
        y: y.value
      })
    }

    // 敌方英雄攻击 
    let eattack = ({x, y})=> {
      console.log('敌人攻击了2', x, y);
      addEnemyBullte({
        x: x.value + 30,
        y: y.value + 50
      })
    }

    
    game.ticker.add(tickerHandle);

    return {
      planeInfo,
      enemyList,
      selfAttack,
      selfBullteList,
      eattack,
      enemyBullteList

    };
  },
  render(ctx) {
    let createEnemy = () => {
      return ctx.enemyList.map((v) => {
        return h(Enemy, { x: v.x, y: v.y,  onEattack: ctx.eattack });
      });
    };

    let  createBullte = () => {
      return ctx.selfBullteList.map((v) => {
        return h(Bullet, { x: v.x, y: v.y });
      });
    };

    let createEnemyBullteH = () => {
      return ctx.enemyBullteList.map(v=>{
        return h(EnemyBullet, { x: v.x, y: v.y})
      })
    }

    return h("Container", [
      h(Map),
      h(Plane, { ...ctx.planeInfo, onAttack: ctx.selfAttack }),
      // h(Bullet, { x: 200, y: 200 }),
      ...createEnemy(),
      ...createBullte(),
      ...createEnemyBullteH()
    ]);
  },
});

// 创建己方飞机
function useCreatePlane() {
  let planeInfo = reactive({ x: 200, y: 900, width: 130, height: 150 });
  let speed = 20;
  window.addEventListener("keydown", function(e) {
    console.log(e.keyCode, e.code);
    switch (e.code) {
      case "ArrowUp":
        planeInfo.y -= speed;
        break;
      case "ArrowDown":
        planeInfo.y += speed;
        break;
      case "ArrowLeft":
        planeInfo.x -= speed;
        break;
      case "ArrowRight":
        planeInfo.x += speed;
        break;
      case "Space":
        // 发子弹
        break;
    }
  });

  return {
    planeInfo,
  };
}
// 创建敌机
function useCreateEnemy() {
  let enemyList = reactive([
    {
      x: 100,
      y: 130,
      width: 90,
      height: 90,
      life: 2
    },
    {
      x: 200,
      y: 130,
      width: 90,
      height: 90,
      life: 2
    },
    {
      x: 300,
      y: 10,
      width: 90,
      height: 90,
      life: 2
    },
    {
      x: 400,
      y: 210,
      width: 90,
      height: 90,
      life: 2
    },
    {
      x: 500,
      y: 60,
      width: 90,
      height: 90,
      life: 2
    },
  ]);
  const moveEnemy = () => {
    enemyList.forEach((v) => {
      v.y += 3;
      if (v.y > 1100) {
        v.y = -100;
      }
    });
  };
  const removeEnemy = (index) => {
    removeEnemy.splice(index, 1)
  }
  return {
    enemyList,
    moveEnemy,
  };
}

// 创建己方子弹
function createSelfBullte() {
  let selfBullteList = reactive([])

  let addBullte = function(option) {
    selfBullteList.push({ ...option, width: 30, height: 50 });
  };

  let moveBullte = function() {
    let speed = 15;
    selfBullteList.forEach((v) => (v.y -= speed));
  };

  let removeBullte = function(index) {
    selfBullteList.splice(index, 1)
  };


  return {
    selfBullteList,
    addBullte,
    moveBullte,
    removeBullte,
  };
}
// 创建敌方方子弹
function createEnemyBullte() {
  let enemyBullteList = reactive([])

  let addEnemyBullte = function(option) {
    enemyBullteList.push({ ...option, width: 30, height: 50 });
  };

  let moveEnemyBullte = function() {
    let speed = 10;
    enemyBullteList.forEach((v) => (v.y += speed));
  };

  let removeEnemyBullte = function(index) {
    enemyBullteList.splice(index, 1)
  };




  return {
    enemyBullteList,
    addEnemyBullte,
    moveEnemyBullte,
    removeEnemyBullte,
  };
}
